<template>
	<view class="recommend-grid">
		<view class="recommend-grid-item recommend-grid-1">
			<view class="recommend-title">
				全品类家电清洁
			</view>
			<view class="recommend-sub-title">
				快速上门 全城服务
			</view>
			<view class="recommend-btn">
				<text>点击查看</text>
				<view>
					<image mode="scaleToFill" src="/static/images/arrow-right-white.png"></image>
				</view>
			</view>
			<image class="recommend-image" mode="scaleToFill"
				src="http://124.223.58.229:8001/api/uploads/image/20250303/a705e305-f3bf-405d-8784-ec3b6368dea4.png">
			</image>
		</view>
		<view class="recommend-grid-item recommend-grid-2">
			<view class="recommend-title">
				全屋焕新家
			</view>
			<view class="recommend-sub-title">
				家电清理 专项保洁
			</view>
			<view class="recommend-btn">
				<text>点击查看</text>
				<view>
					<image mode="scaleToFill" src="/static/images/arrow-right-white.png"></image>
				</view>
			</view>
			<image class="recommend-image" mode="scaleToFill"
				src="http://124.223.58.229:8001/api/uploads/image/20250303/e17138eb-5213-42af-bc87-efe0bf2f0a10.png">
			</image>
		</view>
		<view class="recommend-grid-item recommend-grid-3">
			<view class="recommend-title">
				日常保洁2小时
			</view>
			<view class="recommend-btn">
				<text>立即抢购</text>
				<view>
					<image mode="scaleToFill" src="/static/images/arrow-right-white.png"></image>
				</view>
			</view>
			<image class="recommend-image" mode="scaleToFill"
				src="http://124.223.58.229:8001/api/uploads/image/20250303/d4239c14-795e-429b-b584-648b26a6d387.png">
			</image>
		</view>
		<view class="recommend-grid-item recommend-grid-4">
			<view class="recommend-title">
				深度保洁3小时
			</view>
			<view class="recommend-btn">
				<text>立即抢购</text>
				<view>
					<image mode="scaleToFill" src="/static/images/arrow-right-white.png"></image>
				</view>
			</view>
			<image class="recommend-image" mode="scaleToFill"
				src="http://124.223.58.229:8001/api/uploads/image/20250303/9fd356d6-875e-41c8-9b34-ca79a497e558.png">
			</image>
		</view>
		<view class="recommend-grid-item recommend-grid-5">
			<view class="recommend-title">
				家电清洗套餐<br>(任选3件)
			</view>
			<view class="recommend-btn">
				<text>立即抢购</text>
				<view>
					<image mode="scaleToFill" src="/static/images/arrow-right-white.png"></image>
				</view>
			</view>
			<image class="recommend-image" mode="scaleToFill"
				src="http://124.223.58.229:8001/api/uploads/image/20250303/bd7147ce-d900-40b0-8513-a54f2cdb3d2e.png">
			</image>
		</view>
		<view class="recommend-grid-item recommend-grid-6">
			<view class="recommend-title">
				全屋大扫除(≤80㎡)
			</view>
			<view class="recommend-btn">
				<text>立即抢购</text>
				<view>
					<image mode="scaleToFill" src="/static/images/arrow-right-white.png"></image>
				</view>
			</view>
			<image class="recommend-image" mode="scaleToFill"
				src="http://124.223.58.229:8001/api/uploads/image/20250303/e17138eb-5213-42af-bc87-efe0bf2f0a10.png">
			</image>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.recommend-grid {
		margin-top: 46rpx;
		display: grid;
		grid-template-columns: 341rpx 341rpx;
		grid-template-rows: 202.44rpx 182.44rpx 182.44rpx 182.44rpx;
		gap: 20rpx;
		justify-content: center;

		.recommend-grid-item {
			width: 100%;
			height: 100%;
			min-height: 0;
			min-width: 0;
			position: relative;

			.recommend-title {
				position: absolute;
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: bold;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.recommend-sub-title {
				position: absolute;
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.recommend-btn {
				position: absolute;
				background: #FFFFFF;
				border-radius: 17rpx 17rpx 17rpx 17rpx;
				padding: 7rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: 400;
					font-size: 22rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				view {
					width: 18rpx;
					height: 18rpx;
					display: grid;
					place-items: center;
					border-radius: 50%;

					image {
						width: 7rpx;
						height: 11rpx;
						display: block;
					}
				}
			}
		}

		.recommend-grid-1 {
			background: url("http://124.223.58.229:8001/api/uploads/image/20250303/9a9688fc-51a7-40df-8008-4c26b3dda3ca.png") center no-repeat;
			background-size: 100% 100%;
			grid-column: span 2;

			.recommend-title {
				left: 29rpx;
				top: 33rpx;
				font-size: 44rpx;
				color: #2A89D8;
			}

			.recommend-sub-title {
				left: 28rpx;
				top: 94rpx;
			}

			.recommend-btn {
				left: 28rpx;
				top: 136rpx;
				width: 151rpx;
				height: 35rpx;

				text {
					color: #2A89D8;
				}

				view {
					background: #2A89D8;
				}
			}

			.recommend-image {
				width: 349rpx;
				height: 147rpx;
				position: absolute;
				right: 13rpx;
				bottom: 18rpx;
			}
		}

		.recommend-grid-2 {
			background: url("http://124.223.58.229:8001/api/uploads/image/20250303/fffdaf9e-1cc0-48b0-80be-0cf37e75491d.png") center no-repeat;
			background-size: 100% 100%;
			grid-row: span 2;

			.recommend-title {
				left: 61rpx;
				top: 33rpx;
				font-size: 44rpx;
				color: #FE9F23;
			}

			.recommend-sub-title {
				left: 71rpx;
				top: 94rpx;
			}

			.recommend-btn {
				left: 95rpx;
				top: 323rpx;
				width: 151rpx;
				height: 35rpx;

				text {
					color: #FE9F23;
				}

				view {
					background: #FE9F23;
				}
			}

			.recommend-image {
				width: 245rpx;
				height: 184rpx;
				position: absolute;
				left: 49rpx;
				top: 127rpx;
			}
		}

		.recommend-grid-3 {
			background: url("http://124.223.58.229:8001/api/uploads/image/20250303/d1cef761-1407-4c89-bdb3-ea9de3858887.png") center no-repeat;
			background-size: 100% 100%;

			.recommend-title {
				left: 21rpx;
				top: 47rpx;
				font-size: 32rpx;
				color: #48BDA4;
			}

			.recommend-btn {
				left: 21rpx;
				top: 100rpx;
				width: 151rpx;
				height: 39rpx;

				text {
					color: #48BDA4;
				}

				view {
					background: #48BDA4;
				}
			}

			.recommend-image {
				width: 93rpx;
				height: 125rpx;
				position: absolute;
				left: 238rpx;
				top: 40rpx;
			}
		}

		.recommend-grid-4 {
			background: url("http://124.223.58.229:8001/api/uploads/image/20250303/de5c93c1-e812-4993-a3bb-65e11cddb3a2.png") center no-repeat;
			background-size: 100% 100%;

			.recommend-title {
				left: 16rpx;
				top: 46rpx;
				font-size: 32rpx;
				color: #2A89D8;
			}

			.recommend-btn {
				left: 21rpx;
				top: 100rpx;
				width: 151rpx;
				height: 39rpx;

				text {
					color: #2A89D8;
				}

				view {
					background: #2A89D8;
				}
			}

			.recommend-image {
				width: 122rpx;
				height: 124rpx;
				position: absolute;
				left: 208rpx;
				top: 43rpx;
			}
		}

		.recommend-grid-5 {
			background: url("http://124.223.58.229:8001/api/uploads/image/20250303/40a7eca1-617a-4988-b539-27e1a93ad7f8.png") center no-repeat;
			background-size: 100% 100%;

			.recommend-title {
				left: 17rpx;
				top: 24rpx;
				font-size: 28rpx;
				color: #E46271;
			}

			.recommend-btn {
				left: 21rpx;
				top: 108rpx;
				width: 151rpx;
				height: 39rpx;

				text {
					color: #E46271;
				}

				view {
					background: #E46271;
				}
			}

			.recommend-image {
				width: 120rpx;
				height: 133rpx;
				position: absolute;
				left: 203rpx;
				top: 24rpx;
			}
		}

		.recommend-grid-6 {
			background: url("http://124.223.58.229:8001/api/uploads/image/20250303/e10f4634-fcb0-46e6-903c-51da9b0d3f15.png") center no-repeat;
			background-size: 100% 100%;
			.recommend-title {
				left: 16rpx;
				top: 46rpx;
				font-size: 32rpx;
				color: #5C5AE9;
			}
			
			.recommend-btn {
				left: 21rpx;
				top: 100rpx;
				width: 151rpx;
				height: 39rpx;
			
				text {
					color: #5C5AE9;
				}
			
				view {
					background: #5C5AE9;
				}
			}
			
			.recommend-image {
				width: 127rpx;
				height: 99rpx;
				position: absolute;
				left: 206rpx;
				top: 76rpx;
			}
		}
	}
</style>